<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="../../dist/css/mui.css">
		<script src="../../dist/js/mui.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link href="../../css/xq.css">
		<!-- 引入组件 -->
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../../js/vue-lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js"></script>	
		<title></title>
		<style type="text/css">
			#lb img{
				height: 100px;
				width: 100px;
				margin-left: 5px;
				margin-bottom: -15px;
			}
			#sa{
				width: 95%;
				height: 40px;
				margin: 10px auto;
				border-radius: 30px/30px;
				background-color:  white;
			}
			#sa a{
				color: rgba(0,0,0,0.5);
			}
			#sa a:hover{
				color: rgba(0,0,0,0.5);
			}
			li{
				list-style: none;
			}
			#swipe-zixun {
				text-indent: 25px;
				background-color: white;
				border-radius: 9px;
				height: 30px;
				margin: 11px 24px 1px 24px;
			}
			#zixun {
				clear: both;
				background-color: #CCCCCC;
				height: 60px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="24">
						<van-search background="red" v-model="value" @search="onSearch" placeholder="搜索商品名称" show-action shape="round">
							<div slot="action">
								<van-icon name="chat-o" size="25px" color="white" style="margin-top:-10px;margin-top: 15px;" />
							</div>
						</van-search>
					</van-col>
				</van-row>										
			</header>
			<section style="background-color:  #E5E5E5;">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<van-swipe :autoplay="3000" indicator-color="white">					
						<van-swipe-item v-for="(image,index) in images" :key="index">
							<img :src="image.ImageUrl" style="height: 200px;width:100%;"/>
						</van-swipe-item>						 	  
					</van-swipe>
					<div id="sa">
						<van-row>
							<van-col span="4" style="text-align: center;line-height: 40px;color: red;font-size: 12px;">
								<a style="color: red;"href="javascript:;">资讯</a>
								<span style="border: 0.5px solid black;margin-left: 10px;"></span>
							</van-col>						
							<van-col span="16">
								<!-- <van-notice-bar	text="特价了,欢迎前来购买喽,动动手指赶快下单吧."
								 left-icon="volume-o"></van-notice-bar> -->
								 <van-swipe id="swipe-zixun" :autoplay="1000" :show-indicators="false" vertical>
									<van-swipe-item>玩转高冷帅气装扮</van-swipe-item>
									<van-swipe-item>小米9出现花屏故障</van-swipe-item>
									<van-swipe-item>为啥主板价格还有差</van-swipe-item>
									<van-swipe-item>爬楼梯有助于顺产？</van-swipe-item>
								 </van-swipe>
							</van-col>	
							<van-col span="4" style="text-align: center;line-height: 40px;color: rgba(0,0,0,0.5);font-size: 12px;">
								<span style="border: 0.5px solid black;margin-right: 10px;"></span>
								<a style="color: red;"href="javascript:;">更多</a>
								</van-col>						
						</van-row>	
					</div>			
					<van-row style="background-color: #F8F8F8; margin-top:10px;padding-left: 15px;">				    
					   <van-col span="6" v-for="item in type">
							<div style="width: 45px;height: 45px; border-radius: 15px/15px;background-color: plum;
								font-size: 25px;margin-top: 10px;margin-left: 10px;color: white;text-align: center;line-height: 45px;">
								{{item.Name[0]}}	
							</div>	
							<div style="font-size: 12px;margin-left: 10px;margin-top:5px;color: darkgray;margin-bottom: 5px;">
								{{item.Name}}
							</div>								 
						  </van-col>												   
					</van-row>	
					<van-row>
						<van-col span="6">热门推荐</van-col>
					</van-row>
					<van-row>
						<van-col span="8">
							<img src="hot.GoodsImageUrl" onerror="this.src='../../img/tuijian.jpg'" style="width: 110px;">					
						</van-col>							
					</van-row>
					<div id="lb">	
						<van-row>
							<van-col span="6">商品列表</van-col>
						</van-row>									
						<van-row>
							<van-col span="24">
								<van-list v-model="loading" :finished="finished" finished-text="没有更多了" error-text="加载失败" @load="onLoad">
									<li v-for="(item, index) in list" :name="item.id">
										<van-card :num="item.count" :price="item.RealPrice" :origin-price="item.MarketPrice" :title="item.Name" @click="onClickUrl(index)">
											<img slot="thumb" :src="item.GoodsImageUrl.src" onerror="this.src='../../img/photo.png'" />
											<span slot="footer">
												<label style="padding-right: 20%;">累计销售{{item.VirtualSaleCount}}</label>
												<label>{{item.BrowseCount}}次浏览</label>
											</span>
										</van-card>
									</li>
								</van-list>
							</van-col>
						</van-row>						
					</div>
				</van-pull-refresh>
			</section>
			<footer>
				
			</footer>
		</div>
		<script type="text/javascript">
			mui.plusReady(function() {
			document.addEventListener("netchange",onNetChange,false);
			function onNetChange(){
			　　//获取当前网络类型
			　　var nt = plus.networkinfo.getCurrentType();
			　　switch(nt){
			　　　　case plus.networkinfo.CONNECTION_ETHERNET:
			　　　　case plus.networkinfo.CONNECTION_WIFI:
			　　　　　　mui.toast("当前为WiFi网络环境");
			　　　　　　break;
			　　　　case plus.networkinfo.CONNECTION_CELL2G:
			　　　　case plus.networkinfo.CONNECTION_CELL3G:
			　　　　case plus.networkinfo.CONNECTION_CELL4G:
			　　　　　　mui.toast("当前正在使用蜂窝数据网络");
			　　　　　　break;
			　　　　default:
			　　　　　　mui.toast("当前没有网络连接");
			　　　　　　break;
			　　}
			}
			})
		</script>
		<script type="text/javascript">		
		//console.log(plus.networkinfo.getCurrentType());
			var vm=new Vue({
				el:"#app",
				data:{
					images:[],
					type:[],
					hot:[],
					zixun:[],
					value: "",
					list: [],//产品列表
					loading: false,
					finished: false,
					isLoading: false
				},
				created:function(){
					_this=this;
					ajax({
						url:"http://dsapi.ysd3g.com/api/IndexData",
						dataType:"jsonp",
						data:{
							p: 1
						},
						success:function(res){
							_this.images=res.Data.CarouselFigureList;
							_this.hot=res.Data.GoodsRecommendList;
							_this.type=res.Data.HotGoodsTypeList;
							_this.zixun=res.Data.InformationList;
							console.log(res);
						}
					}),
					ajax({
						url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
						dataType:"jsonp",
						data:{
							p:1
						},
						success:function(res){	
							_this.list=res.Data;
							console.log(res);
						}
					})
				},
				methods: {				
					onClickUrl: function(i) {
						console.log(i);
						console.log(this.list[i]);
						var id = this.list[i].Id;
						console.log(id);
						var w = plus.webview.create("shopxq.html", "shopxq", {}, {
							ID: id
						}); 
						w.show();
						console.log(w.ID);
					},
					onRefresh: function() {						
						setTimeout(() => {
							this.$toast('刷新成功');
							this.isLoading = false;
						}, 500);
					},					
					onSearch: function() {	
						var w = plus.webview.create("search.html", "search", {}, {
							name: this.value
						}); 
						w.show();
						console.log(w.name);
// 						ajax({
// 							url: "http://dsapi.ysd3g.com/api/GoodsSearch",
// 							dataType: "jsonp",
// 							data: {
// 								name:vm.value
// 							},
// 							success: function(res) {
// 								console.log(res);
// 								vm.list = res.Data;
// 								console.log(res.GoodsImageUrl);
// 								console.log(_this.list);								
// 							}
// 						});
// 						if(this.value==""){
// 							ajax({
// 								url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
// 								dataType: "jsonp",
// 								data: {
// 									p: 1
// 								},
// 								success: function(res) {
// 									//console.log(res);
// 									vm.list = res.Data;
// 									//console.log(_this.IndexGoodsData);
// 									var hm = plus.webview.getWebviewById("home");
// 									hm.reload(true);
// 								}
// 							});
// 						}
					},
					onLoad: function() {
						setTimeout(() => {								
							this.loading = false;
							this.finished = true;
						}, 3000)
					}
				}
			})
		</script>
	</body>
</html>
